<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>BILIBILI</title>
	<link rel="stylesheet" href="css/index.css">
	<script type="text/javascript" src="js/jquery-3.4.1.min.js"></script>
	<script type="text/javascript" src="js/index.js"></script>
</head>

<body>
	<!-- 侧边导航栏 -->
    <i id="ear"><img src="image/ear.png"></i>	<!-- 上方小耳朵图片 -->
	<div id="sidebar">
		<div id="goto">
			<li>直播</li>
			<li>动画</li>
			<li>番剧</li>
			<li>国创</li>
			<li>漫画</li>
			<li>音乐</li>
			<li>舞蹈</li>
			<li>游戏</li>
			<li>知识</li>
			<li>数码</li>
			<li>课堂</li>
			<li>汽车</li>
			<li>生活</li>
			<li>美食</li>
			<li>动物圈</li>
			<li>鬼畜</li>
			<li>时尚</li>
			<li>资讯</li>
			<li>娱乐</li>
			<li>专栏</li>
			<li>电影</li>
			<li>TV剧</li>
			<li>影视</li>
			<li>纪录片</li>			
		</div>
		<div id="positions">  <!--转换顺序图标-->
			<svg t="1622636145198" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="5548" width="12" height="12"><path d="M416.64 927.104H259.584V364.224H67.84l348.8-299.968v862.848zM610.56 97.088h157.056v560.128h191.744l-348.8 299.904V97.088z" p-id="5549" fill="#888888"></path></svg>
		</div>
		<div id="toTop">   <!--回到顶部图标-->
			<svg t="1622636607207" class="icon" viewBox="0 0 1819 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="8085" width="12" height="12"><path d="M31.507692 986.865934v5.626374a112.527473 112.527473 0 0 0 154.162638 0l723.551648-719.05055 719.050549 719.05055a112.527473 112.527473 0 0 0 154.162638 0l5.626373-5.626374a112.527473 112.527473 0 0 0 0-154.162637L986.865934 31.507692a112.527473 112.527473 0 0 0-154.162637 0L31.507692 832.703297a112.527473 112.527473 0 0 0 0 154.162637z" fill="#888888" p-id="8086"></path></svg>
		</div>
	</div>






	<!--鬼畜区等普通视频分区-->
	<div id="zone">

		<div id="zone_video">
			<div id="zone_video_head"> <!--分区头部-->
				<div id="zone_icon">
					<svg t="1622725111075" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2106" width="24" height="24"><path d="M958.2 511.5c0-74.1-39-138.8-97.5-175.4 1.2-7.9 1.9-15.9 1.9-24.1 0-91.6-74.3-165.9-165.9-165.9-23.5 0-45.8 4.9-66 13.7-30.1-30.9-72.2-50.2-118.7-50.2s-88.6 19.3-118.7 50.2c-20.2-8.8-42.5-13.7-66-13.7-91.6 0-165.9 74.3-165.9 165.9 0 8.2 0.8 16.2 1.9 24.1-58.5 36.5-97.5 101.3-97.5 175.4 0 67.4 32.4 127.1 82.2 164.8 0 0.5-0.1 1-0.1 1.6 0 130.6 105.9 236.5 236.5 236.5 47.4 0 91.5-14.1 128.5-38.1 37 24 81.1 38.1 128.5 38.1 130.6 0 236.5-105.9 236.5-236.5 0-1-0.1-1.9-0.1-2.9 48.8-37.8 80.4-96.9 80.4-163.5z" fill="#FC6B8A" p-id="2107"></path><path d="M696.7 477.9c-46.6 0-88.6-19.3-118.7-50.2-20.2 8.8-42.5 13.7-66 13.7s-45.8-4.9-66-13.7c-30.1 30.9-72.2 50.2-118.7 50.2-4.1 0-8.2-0.3-12.2-0.6v183.9c0 100.2 82 182.2 182.2 182.2H534c100.2 0 182.2-82 182.2-182.2V476.6c-6.4 0.8-12.8 1.3-19.5 1.3z" fill="#FFFFFF" p-id="2108"></path><path d="M509.5 666.5m-36.9 0a36.9 36.9 0 1 0 73.8 0 36.9 36.9 0 1 0-73.8 0Z" fill="#E2006C" p-id="2109"></path><path d="M647.4 560H624v-23.4c0-7.1-5.8-12.9-12.9-12.9h-5.4c-7.1 0-12.9 5.8-12.9 12.9V560h-23.4c-7.1 0-12.9 5.8-12.9 12.9v5.4c0 7.1 5.8 12.9 12.9 12.9h23.4v23.4c0 7.1 5.8 12.9 12.9 12.9h5.4c7.1 0 12.9-5.8 12.9-12.9v-23.4h23.4c7.1 0 12.9-5.8 12.9-12.9v-5.4c0.1-7.1-5.8-12.9-12.9-12.9zM449.7 560h-23.4v-23.4c0-7.1-5.8-12.9-12.9-12.9H408c-7.1 0-12.9 5.8-12.9 12.9V560h-23.4c-7.1 0-12.9 5.8-12.9 12.9v5.4c0 7.1 5.8 12.9 12.9 12.9h23.4v23.4c0 7.1 5.8 12.9 12.9 12.9h5.4c7.1 0 12.9-5.8 12.9-12.9v-23.4h23.4c7.1 0 12.9-5.8 12.9-12.9v-5.4c0-7.1-5.8-12.9-12.9-12.9z" fill="#FF5C7A" p-id="2110"></path><path d="M608.3 666.1c-7.5 0-13.7 6.1-13.7 13.7 0 37.5-38.2 67.9-85.1 67.9-46.9 0-85.1-30.5-85.1-67.9 0-7.5-6.1-13.7-13.7-13.7s-13.7 6.1-13.7 13.7c0 52.5 50.5 95.3 112.5 95.3S622 732.4 622 679.8c0-7.6-6.1-13.7-13.7-13.7z" fill="#EB53A8" p-id="2111"></path></svg> 
				</div>
				<div id="zone_title">鬼畜</div>
				<div class="zone_more">更多<svg t="1622732705846" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4651" width="20" height="20"><path d="M370.9952 818.688l-28.95872-28.95872 282.0096-282.0096-273.46944-273.44896 28.95872-28.95872 302.42816 302.40768z" fill="#888888" p-id="4652"></path></svg></div>
				<div id="zone_change"><svg t="1622731824478" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3245" width="20" height="20"><path d="M265.6 441.6c1.28 0.64 2.56 0.64 3.84 0.64 7.04 0 13.44-4.48 15.36-12.16 28.8-107.52 126.72-183.04 238.08-183.04 83.84 0 159.36 41.6 204.16 108.16l-42.88 21.12 104.96 71.04 8.96-126.72-42.24 20.48c-50.56-77.44-136.96-126.08-232.96-126.08-126.08 0-236.8 85.12-269.44 206.72-1.28 8.96 3.84 17.92 12.16 19.84zM783.36 534.4c-8.32-1.92-17.28 3.84-19.2 12.16-24.32 112.64-125.44 193.92-241.28 193.92-96 0-181.12-55.04-221.44-138.24l44.8-21.76-104.96-71.04-8.96 126.72 40.32-19.84c46.08 94.08 142.08 156.16 250.24 156.16 130.56 0 244.48-92.16 272-219.52 2.56-8.32-2.56-16.64-11.52-18.56z" fill="#888888" p-id="3246"></path></svg>换一换</div>
			</div>

			<div id="zone_video_content">  <!--视频布局-->
				<div class="a_video">
					<div class="a_video_cover"> <img src="image/cover1.PNG"/> </div>
					<div class="a_video_title"> 饮茶哥：我不干了！</div>
					<div class="a_video_up"> <span>up</span> OELoop </div>
				</div>
				<div class="a_video">
					<div class="a_video_cover"> <img src="image/cover1.PNG"/> </div>
					<div class="a_video_title"> 饮茶哥：我不干了！</div>
					<div class="a_video_up"> <span>up</span> OELoop </div>
				</div>
				<div class="a_video">
					<div class="a_video_cover"> <img src="image/cover1.PNG"/> </div>
					<div class="a_video_title"> 饮茶哥：我不干了！</div>
					<div class="a_video_up"> <span>up</span> OELoop </div>
				</div>
				<div class="a_video">
					<div class="a_video_cover"> <img src="image/cover1.PNG"/> </div>
					<div class="a_video_title"> 饮茶哥：我不干了！</div>
					<div class="a_video_up"> <span>up</span> OELoop </div>
				</div>

				<div class="a_video">
					<div class="a_video_cover"> <img src="image/cover1.PNG"/> </div>
					<div class="a_video_title"> 饮茶哥：我不干了！</div>
					<div class="a_video_up"> <span>up</span> OELoop </div>
				</div>
				<div class="a_video">
					<div class="a_video_cover"> <img src="image/cover1.PNG"/> </div>
					<div class="a_video_title"> 饮茶哥：我不干了！</div>
					<div class="a_video_up"> <span>up</span> OELoop </div>
				</div>
				<div class="a_video">
					<div class="a_video_cover"> <img src="image/cover1.PNG"/> </div>
					<div class="a_video_title"> 饮茶哥：我不干了！</div>
					<div class="a_video_up"> <span>up</span> OELoop </div>
				</div>
				<div class="a_video">
					<div class="a_video_cover"> <img src="image/cover1.PNG"/> </div>
					<div class="a_video_title"> 饮茶哥：我不干了！</div>
					<div class="a_video_up"> <span>up</span> OELoop </div>
				</div>
			</div>
		</div>

		<div id="zone_rankingList">  <!--分区排行榜-->
			<div id="zone_rankingList_head">
				<div id="rl_head_1">排行榜</div>
			</div>
			<br>
			<div id="ranking1">
				<i class="rankingList_no">1  </i>
				<div id="r1_cover"><img src="image/r1_cover.PNG"></div>
				<div id="r1_title">
					【高能生草】六 一 儿 童 杰
					<p>综合得分：298.4万</p>
				</div>
			</div>
			<div class="ranking">
				<i class="rankingList_no"> 2 </i> 速度与激情9.5
			</div>
			<div class="ranking">
				<i class="rankingList_no"> 3 </i> 大 闹 天 宫
			</div>
			<div class="ranking">
				<i>4</i> 【全明星】海底
			</div>
			<div class="ranking">
				<i>5</i> 【明日方舟】光谱行动的高光干员们
			</div>
			<div class="ranking">
				<i>6</i> 开 盲 盒
			</div>
			<div class="ranking">
				<i>7</i> 烦 人 的 阿 伟
			</div>
			<div class="ranking">
				<i>8</i> 大闹天宫
			</div>
			<div class="ranking">
				<i>9</i> 头号饮家!【茶系我知己】
			</div>
			<div class="ranking">
				<i>10</i> 蔡徐坤 曹操
			</div>
		</div>

	</div>
	
</body>
</html>